<template>
	<div class="content">
		<Form ref="formValidate" :model="form" :label-width="80">
			<div class="formBox" style="margin-bottom:20px">
				<div class="formBox-item">
					<FormItem label="更新时间" prop="updateTime">
						<DatePicker
							transfer
							v-model="form.updateTime"
							format="yyyy-MM-dd"
							type="daterange"
							placement="bottom-end"
							placeholder="请选择更新时间"
							style="width: 200px"
						></DatePicker>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="供应时间" prop="supplyTime">
						<DatePicker
							v-model="form.supplyTime"
							format="yyyy-MM-dd"
							type="daterange"
							placement="bottom-end"
							placeholder="请选择供应时间"
							style="width: 200px"
						></DatePicker>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="食材名称" prop="ingredientsName">
						<Input
							v-model="form.ingredientsName"
							maxlength="20"
							clearable
							placeholder="请输入食材名称"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="供应商名称" prop="supplyName" :label-width="100">
						<Input
							v-model="form.supplyName"
							maxlength="20"
							clearable
							placeholder="请输入供应商名称"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="食材种类" prop="ingredientsTypeName">
						<Select
							v-model="form.ingredientsTypeName"
							style="width: 200px"
							placeholder="请选择食材种类"
							clearable
						>
							<Option
								:value="item.name"
								v-for="(item, index) in materialTypeList"
								:key="index"
								>{{ item.name }}</Option
							>
						</Select>
					</FormItem>
				</div>
				<cusButton
					class="mr_20"
					type="primary"
					@onClick="
						pages.page = 1
						onInit()
					"
					>查询</cusButton
				>
				<cusButton class="mr_20" type="primary" @onClick="reset()"
					>重置</cusButton
				>
			</div>
		</Form>
		<div class="content-bottom">
			<div class="tableBox">
				<cusTable border :loading="loading" :columns="columns" :data="data"  :bottomClass="['cus-page']">
					<template slot-scope="{ row }" slot="weightFlag">
						{{ row.weightFlag == 0 ? '否' : '是' }}
					</template>
					<template slot-scope="{ row }" slot="createTime">
						{{ row.createTime | formatTime }}
					</template>
					<template slot-scope="{ row }" slot="originalPrice">
						{{ row.originalPrice.toFixed(2) }}
					</template>
					<template slot-scope="{ row }" slot="operation">
						<div class="flex">
							<cus-button
								type="text"
								size="small"
								:style="{ color: '#1E6FFF', padding: '0 8px' }"
								@onClick="onDetail(row)"
							>
								详情
							</cus-button>
						</div>
					</template>
				</cusTable>
				<div style="width: 100%;display: flex;justify-content: flex-end">
					<cus-page
						:data="pages"
						class="mt_10"
						@pageChange="selectNewestHistoricalPriceApi"
					></cus-page>
				</div>
			</div>
		</div>

		<!-- 详情 -->
		<detailHistoryModal ref="detailHistoryModal"></detailHistoryModal>
	</div>
</template>

<script>
import {
	selectNewestHistoricalPrice,
	localfoodtype
} from '@/api/business/dishesModule'
import detailHistoryModal from './components/detailHistoryModal'
export default {
	components: { detailHistoryModal },
	data() {
		return {
			ruleValidate: {},
			form: {
				ingredientsName: '', // 供应商
				supplyName: '', // 供应种类
				updateTime: [],
				supplyTime: [],
				ingredientsTypeName: ''
			},
			materialTypeList: [],
			loading: false,
			data: [],
			columns: [
				{
					title: '序号',
					width: 70,
					type: 'index',
					align: 'center'
				},
				{
					title: '食材种类',
					key: 'ingredientsTypeName',
					align: 'center'
				},
				{
					title: '食材名称',
					key: 'ingredientsName',
					align: 'center'
				},
				{
					title: '供应商',
					key: 'supplyName',
					align: 'center'
				},
				// {
				// 	title: '单位',
				// 	key: 'unit',
				// 	align: 'center'
				// },
				{
					title: '计量单位',
					key: 'model',
					align: 'center'
				},
				{
					title: '最新价格',
					align: 'center',
					slot: 'originalPrice'
				},
				// {
				// 	title: '称重入库',
				// 	slot: 'weightFlag',
				// 	align: 'center'
				// },
				{
					title: '更新时间',
					slot: 'createTime',
					align: 'center'
				},
				{
					title: '生效日期',
					key: 'supplyDate',
					align: 'center'
				},
				{
					title: '商品条形码',
					key: 'snCode',
					align: 'center'
				},
				{
					title: '品牌',
					key: 'brand',
					align: 'center'
				},
				{
					title: '来源',
					key: 'source',
					align: 'center'
				},
				{
					title: '操作',
					fixed: 'right',
					slot: 'operation',
					align: 'center'
				}
			],
			pages: {
				page: 1,
				pageSize: 10,
				pageTotal: 0
			}
		}
	},
	mounted() {
		this.onInit()
		this.localfoodtypeApi()
	},
	methods: {
		// 初始化
		onInit() {
			this.selectNewestHistoricalPriceApi()
		},
		// 重置搜索
		reset() {
			this.$refs['formValidate'].resetFields()
			this.onInit()
		},
		// 详情
		onDetail(row) {
			this.$refs['detailHistoryModal'].form.ingredientsId = row.ingredientsId
			this.$refs['detailHistoryModal'].show()
		},
		// 查询最新一条历史价格
		selectNewestHistoricalPriceApi() {
			this.loading = true
			return new Promise((resolve) => {
				selectNewestHistoricalPrice({
					ingredientsName: this.form.ingredientsName || null,
					supplyName: this.form.supplyName || null,
					ingredientsTypeName: this.form.ingredientsTypeName || null,
					startDate: this.form.updateTime[0]
						? new Date(this.form.updateTime[0]).Format('yyyy-MM-dd')
						: null,
					stopDate: this.form.updateTime[1]
						? new Date(this.form.updateTime[1]).Format('yyyy-MM-dd')
						: null,
					supplyStartDate: this.form.supplyTime[0]
						? new Date(this.form.supplyTime[0]).Format('yyyy-MM-dd')
						: null,
					supplyStopDate: this.form.supplyTime[1]
						? new Date(this.form.supplyTime[1]).Format('yyyy-MM-dd')
						: null,
					current: this.pages.page,
					size: this.pages.pageSize
				}).then((res) => {
					this.loading = false
					if (res.retCode === 2000) {
						this.data = res.data.records
						this.pages.pageTotal = res.data.total
						resolve()
					}
				})
			})
		},
		// 获取食材种类
		localfoodtypeApi() {
			return new Promise((resolve) => {
				localfoodtype({}).then((res) => {
					if (res.retCode === 2000) {
						this.materialTypeList = res.data
						resolve()
					}
				})
			})
		}
	}
}
</script>
<style lang="less" scoped>
/deep/.ivu-input-icon {
	height: 40px !important;
	line-height: 40px !important;
}
/deep/.ivu-form-item  {
  margin-bottom: 20px;
}
.content {
	// padding: 20px;
	&-bottom {
		background: #fff;
		border-radius: 6px;
		box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
		padding: 20px;
	}
}

.formBox {
	width: 100%;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
	padding: 20px 20px 1px;
	display: flex;
	flex-wrap: wrap;
	&-item {
		margin-right: 48px;
	}
}
.mr_20 {
	margin-right: 20px;
}

.btnBox {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	margin-bottom: 20px;
}
</style>
